feat(ui): update Disk indicators visual design across console #3142
Conversation
DaryaVorontsova
requested review from
Raubzeug,
adameat,
artemmufazalov and
astandrik
as code owners
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
Please check border-radius for vdisks column. As a see in figma, for all disks border-radius should be 
|
|
ToDo: Fix pdisks page and dimming disks for one vdisk page |
There was a problem hiding this comment.
Pull request overview
This PR updates the visual design of disk indicators throughout the console with improved styling, hover states, and more compact layouts. The changes modernize the appearance of PDisk and VDisk progress bars while making their interactive states more visually clear.
- Updated entity state colors with hover/highlighted states and adjusted border colors for better visual hierarchy
- Modified donor disk logic to display donor indicators regardless of replication state
- Adjusted component widths and spacing for more compact, consistent layouts
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/disks/helpers.ts | Simplified donor icon logic to show for all donors, not just replicating ones |
| src/styles/mixins.scss | Enhanced entity-state-colors mixin with hover/highlighted states and adjusted color values |
| src/containers/Storage/utils/useStorageColumnsSettings.ts | Increased minimum PDisk width from 120px to 165px |
| src/containers/Storage/VDisks/VDisks.scss | Reduced VDisk item width from 90px to 55px and updated margins |
| src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx | Reduced VDisks and Disks column widths for more compact layout |
| src/containers/Storage/PDisk/PDisk.tsx | Added highlighted state when popup is shown |
| src/containers/Storage/Disks/Disks.tsx | Updated VDisks container width constant |
| src/containers/Storage/Disks/Disks.scss | Updated spacing, sizing, and border-radius values |
| src/components/YDBDefinitionList/YDBDefinitionList.scss | Removed max-width constraint from properties list |
| src/components/VDiskPopup/VDiskPopup.tsx | Changed label logic to show donor OR replication label (not both) |
| src/components/VDisk/VDisk.tsx | Updated donor display logic and added highlighted state |
| src/components/DiskStateProgressBar/DiskStateProgressBar.tsx | Added highlighted prop to component interface |
| src/components/DiskStateProgressBar/DiskStateProgressBar.scss | Added opacity states, hover effects, overflow handling, and updated typography |
| &__pdisk-item { | ||
| min-width: 80px; | ||
| min-width: 55px; | ||
| margin-right: 4px; |
There was a problem hiding this comment.
Consider using --g-spacing-1 (which equals 4px) instead of the hardcoded value to maintain consistency with the design system.
| margin-right: 4px; | |
| margin-right: var(--g-spacing-1); |
| margin-right: var(--g-spacing-1); | ||
|
|
||
| &_with-dc-margin { | ||
| margin-right: 12px; |
There was a problem hiding this comment.
Consider using --g-spacing-3 (which equals 12px) instead of the hardcoded value to maintain consistency with the design system. This applies to both instances in this file.
| margin-right: 12px; | |
| margin-right: var(--g-spacing-3); |
Stand: https://nda.ya.ru/t/pOWHeX-N7Nj3xa
CI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ⏭️2
⏭️ Skipped Tests (2)
Bundle Size: ✅
Current: 62.33 MB | Main: 62.32 MB
Diff: +2.08 KB (0.00%)
✅ Bundle size unchanged.
ℹ️ CI Information